<!--  -->
<template>
	<div class="">
		<el-dialog title="脱敏配置" :visible.sync="dialogVisible" :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-form ref="DataMaskingRef" :model="form" label-width="80px" label-position="top">
				<el-form-item>
					<el-checkbox-group class="masking-type" v-model="form.maskingType">
						<el-checkbox class="value" border :label="1">变&nbsp;&nbsp;&nbsp;&nbsp;量</el-checkbox>
						<el-checkbox class="data" border :label="2">随路数据</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="" v-for="(item, index) in formList" :key="index">
					<div slot="label" class="label">
						{{ item.title }}
						<i class="tag el-icon-question"></i>
						<span class="desc">{{ item.desc }}</span>
					</div>
					<template v-if="index === 1">
						<!-- <el-checkbox-group v-model="form.cardCheckbox"> -->
						<el-checkbox v-model="form.cardCheckbox" v-for="(itemCheckbox, indexCheckbox) in item.checkbox" :key="indexCheckbox" :label="itemCheckbox.value">
							{{ itemCheckbox.name }}
						</el-checkbox>
						<!-- </el-checkbox-group> -->
						<!-- <el-radio-group v-model="form.cardRadio"> -->
						<el-radio v-model="form.cardRadio" v-for="(itemRadio, indexRadio) in item.radio" :key="indexRadio" :label="itemRadio.value">
							{{ itemRadio.name }}
						</el-radio>
						<!-- </el-radio-group> -->
					</template>
					<template v-else>
						<el-radio-group v-model="form[item.model]">
							<el-radio v-for="(itemRadio, indexRadio) in item.radio" :key="indexRadio" :label="itemRadio.value">
								{{ itemRadio.name }}
							</el-radio>
						</el-radio-group>
					</template>
				</el-form-item>
				<!-- <el-form-item label="">
					<div slot="label" class="label">
						姓名
						<i>?</i>
						<span class="desc">脱敏随路数据时，需要访客传递随路数据的格式为:{userName:'xxx'}</span>
					</div>
					<el-radio-group v-model="form.name">
						<el-radio label="1">保留首字</el-radio>
						<el-radio label="2">保留末字</el-radio>
						<el-radio label="3">首末各留一字</el-radio>
						<el-radio label="4">全脱敏</el-radio>
						<el-radio label="5">不脱敏</el-radio>
					</el-radio-group>
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleApply">应 用</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { updateConfig } from '@/api/api.js';

export default {
	name: '',
	mixins: [],
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props: {
		visible: {
			type: [Boolean],
			default: false
		},
		id: {
			type: [Number, String],
			default: ''
		},
		initData: {
			type: [Object],
			default() {
				return {};
			}
		}
	},
	data() {
		//这里存放响应式数据
		return {
			form: {
				maskingType: [2], //随路数据
				userName: 0, //姓名
				phoneNumber: 0, //手机号
				homeAddress: 0, //家庭住址
				idCard: '', //身份证号
				cardCheckbox: [],
				cardRadio: 0
			},
			formList: [
				{
					desc: '脱敏随路数据时，需要访客传递随路数据的格式为:{userName:\'xxx\'}',
					title: '姓名',
					model: 'userName',
					radio: [
						{
							name: '保留首字',
							value: 1
						},
						{
							name: '保留末字',
							value: 2
						},
						{
							name: '首末各留一字',
							value: 3
						},
						{
							name: '全脱敏',
							value: 4
						},
						{
							name: '不脱敏',
							value: 0
						}
					]
				},
				{
					desc: '脱敏随路数据时，需要访客传递随路数据的格式为:{idCard:\'xxx\'}',
					title: '身份证号',
					model: 'idCard',
					radio: [
						{
							name: '全脱敏',
							value: 7
						},
						{
							name: '不脱敏',
							value: 0
						}
					],
					checkbox: [
						{
							name: '脱敏地址区',
							value: 1
						},
						{
							name: '脱敏生日区',
							value: 4
						},
						{
							name: '脱敏顺序号',
							value: 2
						}
					]
				},
				{
					desc: '脱敏随路数据时，需要访客传递随路数据的格式为:{phoneNumber:\'xxx\'}',
					title: '手机号',
					model: 'phoneNumber',
					radio: [
						{
							name: '保留前三位',
							value: 1
						},
						{
							name: '保留后四位',
							value: 2
						},
						{
							name: '脱敏中间四位',
							value: 3
						},
						{
							name: '全脱敏',
							value: 4
						},
						{
							name: '不脱敏',
							value: 0
						}
					]
				},
				{
					desc: '脱敏随路数据时，需要访客传递随路数据的格式为:{homeAddress:\'xxx\'}',
					title: '家庭住址',
					model: 'homeAddress',
					radio: [
						{
							name: '保留首字',
							value: 1
						},
						{
							name: '保留末字',
							value: 2
						},
						{
							name: '首末各留一字',
							value: 3
						},
						{
							name: '全脱敏',
							value: 4
						},
						{
							name: '不脱敏',
							value: 0
						}
					]
				}
			]
		};
	},
	//监听属性 类似于data概念
	computed: {
		dialogVisible: {
			get() {
				return this.visible;
			},
			set(value) {
				this.$emit('update:visible', value);
			}
		}
	},
	//监控data中的数据变化
	watch: {
		'form.cardRadio'(newValue) {
			console.log('form.cardRadio=>newValue', newValue);
			const { form } = this;
			if (newValue === 0) {
				form.cardCheckbox = [];
			} else if (newValue === 7) {
				form.cardCheckbox = [1, 2, 4];
			}
		},
		'form.cardCheckbox'(newValue = []) {
			console.log('form.cardCheckbox=>newValue', newValue.length);
			const { form } = this;
			if (newValue.length === 3) {
				form.cardRadio = 7;
			} else if (newValue.length === 0) {
				form.cardRadio = 0;
			} else if (newValue.length > 0 && newValue.length < 3) {
				form.cardRadio = '';
			}
		}
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.init();
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会激活时调用
	deactivated() {}, //如果页面有keep-alive缓存功能，这个函数会停用时调用
	//方法集合
	methods: {
		// 初始化
		init() {
			let { form, initData: { itemData: { maskingType = 2, maskOptions: { userName = 0, phoneNumber = 0, homeAddress = 0, idCard = 0 } = {} } = {} } = {} } = this;

			console.log('DataMasking=>初始化', this.initData);
			if (idCard === 0) {
				form.cardRadio = 0;
			} else if (idCard === 7) {
				form.cardRadio = 7;
			} else {
				const idCardArr = [];
				[1, 2, 4].forEach(item => {
					if ((idCard & item) > 0) {
						idCardArr.push(item);
					}
				});
				form.cardCheckbox = idCardArr;
			}

			const maskingTypeArr = [];
			[1, 2].forEach(item => {
				if ((maskingType & item) > 0) {
					maskingTypeArr.push(item);
				}
			});
			form.maskingType = maskingTypeArr;

			form.userName = userName;
			form.phoneNumber = phoneNumber;
			form.homeAddress = homeAddress;
		},
		// 数组位运算 OR
		getOr(arr = []) {
			if (arr.length === 0) {
				return '';
			}
			return arr.reduce((total = 0, currentValue = 0) => {
				return total | currentValue;
			});
		},
		handleApply() {
			const {
				id,
				form: {
					maskingType = [], //随路数据
					userName = '', //姓名
					phoneNumber = '', //手机号
					homeAddress = '', //家庭住址
					// idCard = '', //身份证号
					cardCheckbox = [],
					cardRadio = ''
				} = {}
			} = this;

			const obj = {
				userName,
				phoneNumber,
				homeAddress
			};
			if (cardRadio === 0) {
				obj.idCard = cardRadio;
			} else {
				obj.idCard = this.getOr(cardCheckbox);
			}

			const value = {
				value: {
					maskingType: this.getOr(maskingType),
					maskOptions: {
						...obj
					}
				}
			};
			updateConfig(id, value).then(res => {
				console.log(res);
				const { status, data = {} } = res;
				if (status === 200) {
					this.dialogVisible = false;
					this.$parent.getConfigList();
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.el-form {
	.masking-type {
		/deep/ .el-checkbox__input {
			display: none;
		}
		label.value {
			margin-right: unset;
			border-radius: unset;
		}
		label.data {
			margin-left: unset;
			border-radius: unset;
		}
	}
	/deep/ .el-form-item {
		margin-bottom: unset;
	}
	/deep/ .el-form-item__label {
		padding-bottom: unset;
		line-height: unset;
		margin: 15px 0 5px;
	}
}
.label {
	.desc {
		visibility: hidden;
		display: inline-block;
		background-color: #f6f6f6;
		padding: 4px 6px;
		color: #000;
		border: 1px solid #dadada;
		border-radius: 4px;
		transition: all 0.3s;
	}

	.tag {
		cursor: pointer;
		padding: 2px 5px;
		font-size: 14px;
		color: #dadada;
		&:hover + .desc {
			visibility: visible;
		}
	}
}
</style>
